<!DOCTYPE html>
<html>

<head lang='zh'>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
	<title>Luckysheet</title>

	<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
	<link rel='stylesheet' href='./plugins/plugins.css' />
	<link rel='stylesheet' href='./css/luckysheet.css' />
	<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
	<script src="./plugins/js/plugin.js"></script>

	<!-- rollup luckysheet.js -->
	<script src="./luckysheet.umd.js"></script>
	<!-- <script src="./controllers/cellTree.js"></script> -->
	<!-- <script type="text/javascript" src="./plugins/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="./plugins/js/jquery.ztree.core.js"></script> -->

</head>

<body>
	<div id="btnAaaaaa" style="position:fixed;z-index:9999;">保存数据 </div>
	<div id="luckysheetDesign"
		style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;background-color: #fff;">
	</div>
	<script src="./demoData/sheetEmpty.js"></script>

	<script>
		$(function () {
			// const designData = require('./demoData/design.json')
			// const isShare = luckysheetDemoUtil.getRequest().share; // '?share=1' opens the collaborative editing mode
			// const gridKey = luckysheetDemoUtil.getRequest().gridKey; // workbook id for collaborative editing, or directly define here
			const options = {
				container: 'luckysheetDesign',
				compType: 'views', //'filling'
				useCase: 'page',
				lang: 'zh',
				showinfobar: false,
				forceCalculation: false,
				plugins: ['chart'],
				fontList: [
					{
						"fontName": "HanaleiFill",
						"url": "./assets/iconfont/HanaleiFill-Regular.ttf"
					},
					{
						"fontName": "Anton",
						"url": "./assets/iconfont/Anton-Regular.ttf"
					},
					{
						"fontName": "Pacifico",
						"url": "./assets/iconfont/Pacifico-Regular.ttf"
					}
				],
				hook: {
					rangeSelect: function (sheet, range) {
						window.selectActive = range
					},
				},
				// data: [sheetEmpty]
				data: []
			}
			options.loading = {
				image: () => {
					return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`
				},
				imageClass: "loadingAnimation"
			}
			options.cellRightClickConfig = {
				customs: [{
					title: 'test',
					onClick: function (clickEvent, event, params) {
						// console.log('function test click', clickEvent, event, params)
					}
				}]
			}
			// $.ajax({
			// 	url: './demoData/design.json',
			// 	type: 'get',
			// 	dataTyoe: 'json',
			// 	success: (res) => {
			// 		window.luckysheet.sheetmanage.setCellDataByJson(res, options)
			// 	}
			// })


			// luckysheet.exitEditMode()
			$("#btnAaaaaa").click(function () {
				window.luckysheet.exitEditMode()  // 推出编辑模式然后保存数据
				// const sheetsData = luckysheet.getAllSheets()
				// const sheetsData = luckysheet.getSheetData()
				const sheetsData = window.luckysheet.getSheetDataToJson()
				// 对dbMark进行排序  保证解析时按照对应顺序解析
				// if (sheetsData.dbMark) {
				// 	const ordered = {}
				// 	Object.keys(sheetsData.dbMark).sort().forEach(item => ordered[item] = sheetsData.dbMark[item])
				// 	sheetsData.dbMark = ordered
				// }
				console.log('sheetsData,', JSON.stringify(sheetsData))
			})
		})
	</script>
	<style>
		/* 自定义loading演示样式 */
		@keyframes loading-rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		@keyframes loading-dash {
			0% {
				stroke-dasharray: 1, 200;
				stroke-dashoffset: 0;
			}

			50% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -40px;
			}

			100% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -120px;
			}
		}

		.loadingAnimation {
			width: 3em;
			height: 3em;
			animation: loading-rotate 2s linear infinite;
		}

		.loadingAnimation circle {
			animation: loading-dash 1.5s ease-in-out infinite;
			stroke-dasharray: 90, 150;
			stroke-dashoffset: 0;
			stroke-width: 2;
			stroke: currentColor;
			stroke-linecap: round;
		}
	</style>
</body>

</html>